import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:openim_common/openim_common.dart';

import '../../../core/controller/im_controller.dart';
import 'my_info_logic.dart';

class MyInfoPage extends StatelessWidget {
  final logic = Get.find<MyInfoLogic>();
  final imLogic = Get.find<IMController>();

  MyInfoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TitleBar.back(
        title: StrRes.myInfo,
      ),
      backgroundColor: Styles.c_F8F9FA,
      body: Obx(() => SingleChildScrollView(
            child: Column(
              children: [
                10.verticalSpace,
                // 头像和姓名区域 - 垂直居中布局
                _buildCornerBgView(
                  isAvatarArea: true,
                  children: [
                    _buildAvatarAndNameView(context),
                  ],
                ),
                10.verticalSpace,
                _buildCornerBgView(
                  children: [
                    _buildItemView(
                      label: StrRes.name,
                      value: imLogic.userInfo.value.nickname,
                      showRightArrow: true,
                      onTap: logic.editMyName,
                    ),
                    // Divider(color: Styles.c_E8EAEF, height: 1.h),
                    // _buildItemView(
                    //   label: StrRes.englishName,
                    //   value: imLogic.userInfo.value.englishName ?? '未设置',
                    //   showRightArrow: true,
                    //   onTap: logic.editEnglishName,
                    // ),
                    Divider(color: Styles.c_E8EAEF, height: 1.h),
                    _buildItemView(
                      label: StrRes.gender,
                      value: imLogic.userInfo.value.gender == 1 ? StrRes.man : 
                             imLogic.userInfo.value.gender == 2 ? StrRes.woman : '未设置',
                      showRightArrow: true,
                      onTap: logic.selectGender,
                    ),
                    Divider(color: Styles.c_E8EAEF, height: 1.h),
                    _buildItemView(
                      label: StrRes.birthDay,
                      value: _formatBirthday(imLogic.userInfo.value.birth),
                      showRightArrow: true,
                      onTap: logic.openDatePicker,
                    ),
                  ],
                ),
                10.verticalSpace,
                _buildCornerBgView(
                  children: [
                    _buildItemView(
                      label: StrRes.mobile,
                      value: _formatPhoneWithArea(imLogic.userInfo.value.areaCode, imLogic.userInfo.value.phoneNumber),
                      showRightArrow: true,
                      onTap: logic.editMobile,
                    ),
                    Divider(color: Styles.c_E8EAEF, height: 1.h),
                    _buildItemView(
                      label: StrRes.email,
                      value: imLogic.userInfo.value.email ?? '未设置',
                      showRightArrow: true,
                      onTap: logic.editEmail,
                    ),
                    Divider(color: Styles.c_E8EAEF, height: 1.h),
                    _buildItemView(
                      label: 'Paxiy ID',
                      value: imLogic.userInfo.value.userID,
                      showRightArrow: false,
                    ),
                  ],
                ),
                // 10.verticalSpace,
                // _buildCornerBgView(
                //   children: [
                //     _buildItemView(
                //       label: '简介',
                //       value: imLogic.userInfo.value.ex ?? '未设置',
                //       showRightArrow: true,
                //       onTap: logic.editBio,
                //     ),
                //     Divider(color: Styles.c_E8EAEF, height: 1.h),
                //     _buildItemView(
                //       label: '地区',
                //       value: imLogic.userInfo.value.areaCode ?? '未设置',
                //       showRightArrow: true,
                //       onTap: logic.editArea,
                //     ),
                //   ],
                // ),
                // 添加我的发布模块
                20.verticalSpace,
                _buildMyPostsView(),
                20.verticalSpace,
              ],
            ),
          )),
    );
  }

  String _formatBirthday(int? timestamp) {
    if (timestamp == null || timestamp == 0) return '未设置';
    final date = DateTime.fromMillisecondsSinceEpoch(timestamp);
    return '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
  }

  String _formatPhoneWithArea(String? areaCode, String? phone) {
    final p = phone ?? '';
    if (p.isEmpty) return '未设置';
    final ac = areaCode ?? '';
    if (ac.isEmpty) return p;
    final code = ac.startsWith('+') ? ac : '+$ac';
    return '$code $p';
  }

  // 我的发布模块
  Widget _buildMyPostsView() {
    return _buildCornerBgView(
      children: [
        Container(
          padding: EdgeInsets.symmetric(vertical: 20.h),
          child: Column(
            children: [
              // 标题
              Container(
                width: double.infinity,
                padding: EdgeInsets.only(left: 16.w, bottom: 16.h),
                child: Text(
                  '我的发布',
                  style: Styles.ts_0C1C33_17sp.copyWith(
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              // 内容区域
              Container(
                padding: EdgeInsets.symmetric(vertical: 40.h),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // 黄色圆形图标
                    Container(
                      width: 60.w,
                      height: 60.w,
                      decoration: BoxDecoration(
                        color: Color(0xFFFFC107), // 黄色
                        shape: BoxShape.circle,
                      ),
                      child: Icon(
                        Icons.message,
                        color: Colors.white,
                        size: 30.w,
                      ),
                    ),
                    16.verticalSpace,
                    // 提示文字
                    Text(
                      '暂无发布',
                      style: Styles.ts_8E9AB0_14sp,
                    ),
                    4.verticalSpace,
                    Text(
                      '前往通知发布你的第一条动态吧！',
                      style: Styles.ts_8E9AB0_12sp,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 新增的头像和姓名垂直布局组件
  Widget _buildAvatarAndNameView(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: logic.openPhotoSheet,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 20.h),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 头像和状态标志
            Stack(
              children: [
                // 头像
                AvatarView(
                  width: 80.w,
                  height: 80.h,
                  url: imLogic.userInfo.value.faceURL,
                  text: imLogic.userInfo.value.nickname,
                  textStyle: Styles.ts_FFFFFF_16sp,
                  isCircle: true,
                ),
                // 编辑图标 - 位于右下角
                Positioned(
                  right: 4.w,
                  bottom: 4.h,
                  child: Container(
                    width: 20.w,
                    height: 20.h,
                    decoration: BoxDecoration(
                      color: Styles.c_0089FF,
                      shape: BoxShape.circle,
                      border: Border.all(
                        color: Colors.white,
                        width: 2,
                      ),
                    ),
                    child: Icon(
                      Icons.edit,
                      size: 10.w,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
            12.verticalSpace,
            // 姓名
            (imLogic.userInfo.value.nickname ?? '').toText
              ..style = Styles.ts_0C1C33_17sp_medium
              ..textAlign = TextAlign.center,
          ],
        ),
      ),
    );
  }

  Widget _buildCornerBgView({required List<Widget> children, bool isAvatarArea = false}) => Container(
        padding: EdgeInsets.symmetric(horizontal: 16.w),
        margin: EdgeInsets.symmetric(horizontal: 30.w),
        decoration: BoxDecoration(
          color: isAvatarArea ? Colors.transparent : Colors.white,
          borderRadius: BorderRadius.circular(6.r),
        ),
        child: Column(children: children),
      );

  Widget _buildItemView({
    required String label,
    String? value,
    String? url,
    bool isAvatar = false,
    bool showRightArrow = true,
    Function()? onTap,
  }) =>
      GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: showRightArrow ? onTap : null,
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 12.h),
          child: Row(
            children: [
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Label在上面，字体较小
                    label.toText..style = Styles.ts_0C1C33_12sp,
                    4.verticalSpace,
                    // Value在下面，字体较大
                    if (isAvatar)
                      AvatarView(
                        width: 32.w,
                        height: 32.h,
                        url: url,
                        text: value,
                        textStyle: Styles.ts_FFFFFF_10sp,
                      )
                    else
                      (IMUtils.emptyStrToNull(value) ?? '').toText
                        ..style = Styles.ts_0C1C33_14sp
                        ..maxLines = 2
                        ..overflow = TextOverflow.ellipsis,
                  ],
                ),
              ),
              if (showRightArrow)
                ImageRes.rightArrow.toImage
                  ..width = 24.w
                  ..height = 24.h,
            ],
          ),
        ),
      );
}